.wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-5, 20px);
  align-items: flex-start;
  justify-content: center;
}

.message1 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1, 4px);
  align-items: flex-start;
}

.message1Title {
  font-family: var(--message-font, Montserrat);
  font-size: var(--font-size-6);
  font-weight: 700;
  line-height: 160%;
  color: var(--callout-warning-text, #c3b476);
}

.message1Sentence {
  font-size: var(--font-size-4);
  font-weight: 400;
  line-height: 160%;
  color: var(--callout-warning-text, #c3b476);
}

.message2 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1, 4px);
  align-items: flex-start;
}

.message2Title {
  font-size: var(--font-size-6);
  font-weight: 700;
  line-height: 160%;
  color: var(--callout-warning-text, #c3b476);
}

.message2Sentence {
  font-size: var(--font-size-4);
  font-weight: 400;
  line-height: 160%;
  color: var(--callout-warning-text, #c3b476);
}

.callout {
  font-size: var(--font-size-3);
  font-weight: 400;
  line-height: normal;
  color: var(--callout-warning-link, #e7ddb3);
  text-decoration: underline;
  text-decoration-color: var(
    --callout-warning-underline,
    rgba(231, 221, 179, 0.4)
  );
}

.message3 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1, 4px);
  align-items: flex-start;
  align-self: stretch;
}

.message3Title {
  font-size: var(--font-size-4);
  font-weight: 700;
  line-height: 160%;
  color: var(--callout-warning-text, #c3b476);
}

.message3Sentence {
  font-size: var(--font-size-4);
  font-weight: 400;
  line-height: 160%;
  color: var(--callout-warning-text, #c3b476);
}

@media screen and (min-width: 768px) {
  .wrapper {
    gap: var(--spacing-8, 32px);
  }

  .message1 {
    gap: var(--spacing-2, 8px);
  }

  .message1Title {
    font-size: var(--font-size-8, 20px);
  }

  .message1Sentence {
    font-size: var(--font-size-5, 14px);
  }

  .message2 {
    gap: var(--spacing-2, 8px);
  }

  .message2Title {
    font-size: var(--font-size-7, 18px);
  }

  .message2Sentence {
    font-size: var(--font-size-5, 14px);
  }

  .callout {
    font-size: var(--font-size-5, 14px);
  }

  .message3 {
    gap: var(--spacing-2, 8px);
  }

  .message3Title {
    font-size: var(--font-size-5, 14px);
  }

  .message3Sentence {
    font-size: var(--font-size-5, 14px);
  }
}
